import React, { Component } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import { Form, Input, notification, Select, Col, Row, Table, Popconfirm, Button } from 'antd';
import { DividerItem } from '@/components/DividerItem';
import OneItem from './OneItem';
import EditableFormTable from './EditableFormTable ';
const { Option } = Select;
const { TextArea } = Input;

@connect(({ micro }) => ({
	details: micro.details || {},
	tableData: micro.tableData || [] // 缓存 tableData
}))
class FormItem extends Component<any, any> {
	componentDidMount() {
		const {dispatch} = this.props
    dispatch({type: 'micro/queryInfo'}).then(() => {
			const { form, details } = this.props
			const { setFieldsValue } = form
			const { config={} } = details
			setFieldsValue({
				name: details.name,
				address: details.address,
				telephone: details.telephone,
				annihilator: config.FE,
				bag: config.WB,
				gun: config.WG,
				helmet: config.FH,
				clothes: config.FC,
				shoes: config.PB,
				utils: config.BT
			})
		
		})
		
	}

	handleSubmit = (e) => {
		e.preventDefault();
		const { dispatch, form,  tableData, details } = this.props;
		form.validateFields((err, values) => {
			
			if (!err) {
				let validateArray = tableData.slice(0, 1)
				
				if(validateArray.length === 1 || validateArray.length === 0 ){
					 let res=validateArray.map((item) => {
						let lengthArr =	Object.keys(item)
						
						if( lengthArr.length === 6){
							return 'true'
						} else{
							return 'false'
						}
					})
					
					if(res.includes('false')){
						notification['error']({
							message: `站长或消防员信息不完善`,
						});
						return
					}
					
				}
				if(validateArray.length === 0  ){
					notification['error']({
						message: `站长或消防员信息不完善`,
					});
					return
				}
				dispatch({ type: 'micro/modif', payload: {
					id: details.id,
					address: values.address,
					name: values.name,
					telephone: values.telephone,
					member: tableData.length === 0 ? details.member : tableData,
					config: {
						FE: values.annihilator,
						FH: values.helmet,
						WB: values.bag,
						WG: values.gun,
						FC: values.clothes,
						PB: values.shoes,
						BT: values.utils
					}
				}}).then(() => {
					dispatch({type: 'micro/collectData', payload: []})
				})
			} else {
				notification['error']({
					message: `保存失败`,
					description: '单位信息录入不规范'
				});
			}
		});
	};

	render() {
		const { form, details } = this.props;


		const MainInfo = DividerItem('idcard', '基础信息'); //基础信息
		const Equip = DividerItem('appstore', '配备情况'); //配备情况
		const PeopleManage = DividerItem('user', '成员管理'); //成员管理
		return (
			<Form onSubmit={this.handleSubmit}>
				<MainInfo />
				<Row>
					<Col span={8}>
						<OneItem isNumber={false} title="微型消防站名称" require={true} type="name" form={form} />
					</Col>
					<Col span={8}>
						<OneItem title="地址" isNumber={false} require={true} type="address" form={form} />
					</Col>
					<Col span={8}>
						<OneItem title="值班室电话" isNumber={false} type="telephone" form={form} />
					</Col>
				</Row>
				<Equip />
				<Row>
					<Col span={8}>
						<OneItem title="灭火器" type="annihilator" form={form} addonAfter="个" />
					</Col>
					<Col span={8}>
						<OneItem title="水袋" type="bag" form={form} addonAfter="条" />
					</Col>
					<Col span={8}>
						<OneItem title="水枪" type="gun" form={form} addonAfter="个" />
					</Col>
				</Row>
				<Row>
					<Col span={8}>
						<OneItem title="消防头盔" type="helmet" form={form} addonAfter="个" />
					</Col>
					<Col span={8}>
						<OneItem title="灭火防护服" type="clothes" form={form} addonAfter="件" />
					</Col>
					<Col span={8}>
						<OneItem title="防护靴" type="shoes" form={form} addonAfter="双" />
					</Col>
				</Row>
				<Row>
					<Col span={8}>
						<OneItem title="破拆工具" type="utils" form={form} addonAfter="套" />
					</Col>
				</Row>
				<PeopleManage />
				<EditableFormTable />
				<div style={{ marginTop: 50, marginBottom: 50, marginLeft: 40 }}>
				<Button
						
						onClick={() => {
							window.history.back();
						}}
					>
						取消
					</Button>
					<Button  style={{ marginLeft: 20 }} type="primary" htmlType="submit">
						保存
					</Button>
		
				</div>
			</Form>
		);
	}
}

const FormList = Form.create()(FormItem);
export default FormList;
